<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏豫强的作业</title>

</head>
<style>
    * {
        margin: 0px auto;
        text-align: center;
    }

    body {
        padding-top: 30px;
    }

    .qiu {
        width: 40px;
        height: 40px;
        background: blue;
        border: 1px solid #333;
        border-radius: 25px;
        float: left;
        text-align: center;
        line-height: 40px;
        color: white;
        font-size: 21px;
        margin-left: 10px;
    }

    #qiu {
        display: inline-block;
    }

    .btn {
        display: inline-block;
    }

    button {
        width: 60px;
        height: 40px;
        float: left;
        margin-left: 15px;
    }
</style>

<body>
    <div id='qiu'>

    </div>
    <div class="btn">
        <button onclick="start()">开始</button>
        <button onclick="stop()">停止</button>
    </div>

    <script>
        var arr = [],
            startS //arr 双色球数值数组，startS 定时器名字
        //产生6个1-33的随机数
        function fun() {
            let num = randNum(1, 33) //调用随机数函数获取一个随机数
            if (arr.indexOf(num) == -1) { //判断获取的随机数是否重复
                arr.push(num) //添加到数组
            }
            if (arr.length < 5) { //如果数据长度还不足6个继续调用本函数
                fun()
            }
        }
        //指定范围随机数
        function randNum(min, max) {
            return Math.floor(Math.random() * (max - min) + 1) + min;
        }
        //定时器开始
        function start() {
            clearInterval(startS) //防止点击多次开始 造成不能停止问题，先停在开始新的
            startS = setInterval("ssq()", 1) //每隔多少毫秒调用一次函数
        }
        //定时器停止
        function stop() {
            clearInterval(startS)
        }
        //双色球
        function ssq() {
            arr = [] //先清空数据
            fun() //调用随机数函数 获取6个随机数
            arr.push(randNum(1, 16)) //添加最后一个篮球随机数
            var str = '' //定义html空字符串
            for (i in arr) { //循环已生成的数组
                if (i < arr.length - 2) { //如果是最后一个篮球 背景色为蓝色
                    str += "<div class='qiu' style='background:red;'>" + arr[i] + "</div>"
                } else {
                    //前面6个背景色为红色
                    str += "<div class='qiu'>" + arr[i] + "</div>"
                }
            }
            //找对象把拼接好的html字符串写入页面中
            document.getElementById('qiu').innerHTML = str
        }
        ssq() //开始执行
    </script>














</body>

</html>